<template>
  <div class="orderrefundxq">
    <el-tabs v-model="activeTab" type="card" style="width: 85%;border: none">
      <div style="">
        <h3 style="height: 50px;border-color:black;display: inline-block">退款状态：{{ stepStatus }}</h3>
        <!-- 订单状态步骤 -->
        <el-steps :active="activeStep" finish-status="success" style="width: 30%;display:inline-block;float: right;">
          <el-step style="width: 140px;" title="发起申请"></el-step>
          <el-step style="width: 140px;" title="商家处理"></el-step>
          <el-step style="width: 140px;" title="退款完毕"></el-step>
        </el-steps>
      </div>
      <!-- 订单信息 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>退款信息</span>
        </div>
        <div style="display: flex;margin-top: 10px;width: 100%;">
          <div style="width: 33%;background-color: #FAFAFA;padding-top: 20px;margin-right:10px;padding-left: 20px">
            <p style="font-weight: bold;margin-bottom: 30px">退款信息</p>
            <p style="margin-bottom: 30px">退款编号：{{ orderForm.transactionId }}</p>
            <p style="margin-bottom: 30px">退款金额：￥{{ orderForm.price }}</p>
            <p style="margin-bottom: 30px">商品名称：{{ spmc() }}</p>
          </div>
          <div style="width: 33%;background-color: #FAFAFA;padding-top: 20px;margin-right:10px;padding-left: 20px">
            <p style="font-weight: bold;margin-bottom: 30px">买家信息</p>
            <p style="margin-bottom: 30px">买家昵称：{{ orderForm.customerNickname }}</p>
            <p style="margin-bottom: 30px">手机号码：{{ orderForm.buyerPhone }}</p>
            <p style="margin-bottom: 30px">使用设备：{{ orderForm.deviceUsed }}</p>
          </div>
          <div style="width: 33%;background-color: #FAFAFA;padding-top: 20px;margin-right:10px;padding-left: 20px">
            <p style="font-weight: bold;margin-bottom: 30px">商家信息</p>
            <p style="margin-bottom: 30px">店铺名称：{{ orderForm.shopname }}</p>
            <p style="margin-bottom: 30px">联系手机：{{ orderForm.shoptel }}</p>
            <p style="margin-bottom: 30px">所在地区：{{ orderForm.shopregion }}</p>
            <p style="margin-bottom: 30px">详细地址：{{ orderForm.shopaddress }}</p>
          </div>
          <div style="width: 33%;background-color: #FAFAFA;padding-top: 20px;margin-right:10px;padding-left: 20px">
            <p style="font-weight: bold;margin-bottom: 30px">配送信息</p>
            <p style="margin-bottom: 30px">配送方式：{{ orderForm.deliveryMethod }}</p>
            <p v-if="orderForm.deliveryMethod=='平台专送'" style="margin-bottom: 30px">配送员：张三{{ }}</p>
            <p v-if="orderForm.deliveryMethod=='平台专送'" style="margin-bottom: 30px">联系手机：1234567890{{ }}</p>
            <p v-if="orderForm.deliveryMethod=='平台专送'" style="margin-bottom: 30px;">
              收货地址：{{ orderForm.receivingAddress }}</p>
          </div>
        </div>
      </el-card>
      <!-- 商品信息 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>协商历史</span>
        </div>
        <div style="display: flex;margin-top: 10px;width: 300px;display: inline-block" v-for="a in orderForm.xmRefunds">
          <div style="width: 270px;background-color: #FAFAFA;padding: 10px;" v-if="a.role!=2">
            <div style="width: 20%;display: inline-block;float: left">
              <p style="color: red;font-size: 14px">{{ a.role == 0 ? "顾客" : a.role == 1 ? "商家" : "审核员" }}</p>
              <img
                  src="https://spyx-h2310a.oss-cn-beijing.aliyuncs.com/2024/10/14/c40943d184fc490184290202767015ac2222.jpg"
                  width="50px" style="border-radius: 50%">
            </div>
            <div style="width: 80%;display: inline-block">
              <p style="margin-bottom: 5px;font-size: 14px">{{ a.username }}</p>
              <p style="margin-bottom: 5px;font-size: 10px">{{ a.createtime }}</p>
              <p style="margin-bottom: 5px;font-size: 14px" v-if="a.role==0">顾客发起了退款申请</p>
              <p style="margin-bottom: 5px;font-size: 14px" v-if="a.role==1">商家拒绝退款</p>
              <p style="margin-bottom: 5px;font-size: 10px">退款原因：{{ a.reason }}</p>
              <p style="margin-bottom: 5px;font-size: 10px">补充说明：{{ a.bcsm }}</p>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 资金信息 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>纠纷处理</span>
        </div>
        <div style="margin-top: 10px;width: 500px;" v-for="a in orderForm.xmRefunds">
          <div style="width: 450px;background-color: #FAFAFA;padding: 10px;" v-if="a.role==2">
            <div style="width: 20%;display: inline-block;float: left">
              <p style="color: red;font-size: 14px">{{ a.role == 0 ? "顾客" : a.role == 1 ? "商家" : "审核员" }}</p>
              <img
                  src="https://spyx-h2310a.oss-cn-beijing.aliyuncs.com/2024/10/14/c40943d184fc490184290202767015ac2222.jpg"
                  width="50px" style="border-radius: 50%">
            </div>
            <div style="width: 40%;display: inline-block">
              <p style="margin-bottom: 5px;font-size: 14px">{{ a.username }}</p>
              <p style="margin-bottom: 5px;font-size: 10px">{{ a.createtime }}</p>
              <p style="margin-bottom: 5px;font-size: 14px">{{ a.zc }}</p>
              <p style="margin-bottom: 5px;font-size: 10px">退款原因：{{ a.reason }}</p>
              <p style="margin-bottom: 5px;font-size: 10px">补充说明：{{ a.bcsm }}</p>
            </div>
            <div style="width: 40%;display: inline-block">
              <!--              <video :src="a.url" width="130px" controls></video>-->
              <div>
                <div v-if="isVideo" class="media-container">
                  <video :src="a.url" width="130px" controls @error="handleMediaError"></video>
                </div>
                <div v-else-if="isAudio" class="media-container">
                  <audio :src="a.url" width="130px" controls @error="handleMediaError"></audio>
                </div>
                <div v-else-if="isImage" class="media-container">
                  <img :src="a.url" width="130px" :alt="a.name" @error="handleMediaError">
                </div>
                <div v-else class="media-container">
                  <p>不支持的媒体类型，请检查资源链接。</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: null,
      // 订单状态步骤的当前活动步骤（假设顾客取货中，对应索引为3）
      activeStep: null,
      // 订单信息
      orderForm: {},
      // 资金信息
      fundForm: {
        amountDue: 135.00,
        amountPaid: 133.00,
        merchantShippingFee: 0,
        technicalServiceFee: 3.99,
        platformSubsidy: 0
      },
      jg: {
        zj: 0,
        dbf: 0,
      },
      isVideo: false,
      isAudio: false,
      isImage: false,
    };
  },
  methods: {
    checkMediaType() {
      this.orderForm.xmRefunds.forEach(item => {
        if (item.role == 2) {
          const url = item.url;
          const fileExtension = url.split('.').pop().toLowerCase();
          const mimeType = this.getMimeTypeFromUrl(url);
          if (['mp4', 'avi', 'mkv', 'mov'].includes(fileExtension) || mimeType.startsWith('video')) {
            this.isVideo = true;
          } else if (['mp3', 'wav', 'aac'].includes(fileExtension) || mimeType.startsWith('audio')) {
            this.isAudio = true;
          } else if (['jpg', 'png', 'gif', 'bmp', 'jpeg'].includes(fileExtension) || mimeType.startsWith('image')) {
            this.isImage = true;
          }
        }
      })
    },
    getMimeTypeFromUrl(url) {
      // 简单的根据文件扩展名推测MIME类型，实际应用中可更完善，比如通过请求头获取等方式
      const fileExtension = url.split('.').pop().toLowerCase();
      switch (fileExtension) {
        case 'mp4':
          return 'video/mp4';
        case 'avi':
          return 'video/x-msvideo';
        case 'mkv':
          return 'video/x-matroska';
        case 'mov':
          return 'video/quicktime';
        case 'mp3':
          return 'audio/mpeg';
        case 'wav':
          return 'audio/wav';
        case 'aac':
          return 'audio/aac';
        case 'jpg':
          return 'image/jpeg';
        case 'png':
          return 'image/png';
        case 'gif':
          return 'image/gif';
        case 'bmp':
          return 'image/bmp';
        case 'jpeg':
          return 'image/jpeg';
        default:
          return '';
      }
    },
    handleMediaError(event) {
      console.error('媒体资源加载或播放出错：', event.target.src, event.target.error);
      // 这里可以根据需求添加更多错误处理逻辑，比如提示用户重新选择资源等
    },
    spmc() {
      var a = ""
      this.orderForm.goods.forEach(item => {
        a += item.gname + ","
      })
      return a
    },
    first() {
      this.orderForm = JSON.parse(localStorage.getItem("order"))
      console.log(this.orderForm)
      this.activeStep = this.orderForm.refundStatus + 1
      this.orderForm.goods.forEach(item => {
        this.jg.zj = item.price * item.numed + this.jg.zj
        this.jg.dbf = 1 * item.numed + this.jg.dbf
      })
    },
  },
  created() {
    this.first();
    this.checkMediaType();
  },
  computed: {
    stepStatus() {
      const statuses = ["发起申请", "商家处理", "退款完毕"];
      if (this.activeStep != 3) {
        return statuses[this.activeStep];
      } else {
        return "退款完毕";
      }
    },
  }
};
</script>

<style scoped>
.box-card {
  margin-top: 15px;
}
</style>
